<template>
  <div class="sub-box-border body">
    <el-table
      :data="host"
      stripe
      height="700px"
      v-loading="loading"
      style="width: 100%">
      <el-table-column
        type="index"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="hostIp"
        label="主机Ip">
      </el-table-column>
      <el-table-column
        prop="hostPort"
        label="主机端口号">
      </el-table-column>
      <el-table-column
        prop="hostAccountUsername"
        label="用户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="hostAccountPassword"
        label="密码">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    export default {
      name: "HostAccount",
      data(){
        return{
          loading: true,
          host:[
            {
              hostIp: '',
              hostPort: '',
              hostAccountUsername: '',
              hostAccountPassword: ''
            }
          ]
        }
      },
      methods:{
        getHostAccount:function () {
          let data = this.$data;
          const qs = require("qs");
          data.loading=true;
          console.log('data');
          console.log(data);
          this.axios.post('/hostaccount/gethostaccount')
            .then(response => {
              let resData = response.data;
              if(resData.errCode == 200){
                //注意 这里只有一条记录,需要特别处理
                let hostArray = new Array();
                hostArray[0] = resData.data;
                data.host = hostArray;
              }else{
                this.$message({
                  message: resData.errMsg,
                  type: 'error'
                });
              }
              data.loading=false;
            })
        }
      },
      created:function(){
        this.getHostAccount();
      }
    }
</script>

<style scoped>

  .body{
    width: 100%;
    height: 800px;
    padding: 10px;
    box-sizing: border-box;
  }
</style>
